<template>
  <div class="categories">
    <!-- 面包屑 -->
    <mianbaoxie />
    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 添加按钮 -->
      <div class="top" style="margin-bottom:15px">
        <el-button type="primary" @click="add">添加分类</el-button>
      </div>
      <!-- tabe tree组件 -->
      <tree-table class="tb-cate" index-text="#" show-index stripe border :data="categorieslist" :columns="columns" :expand-type="false" :selection-type="false">
        <template slot="isok" slot-scope="scope">
          <i class="el-icon-success" v-if="!scope.row.cat_deleted" style="color: lightGreen"></i>
          <i class="el-icon-error" v-else style="color: red"></i>
        </template>
        <template slot="level" scope="scope">
          <el-tag type="primary" effect="plain" size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
          <el-tag type="success" effect="plain" size="mini" v-else-if="scope.row.cat_level === 1">二级</el-tag>
          <el-tag type="warning" effect="plain" size="mini" v-else>三级</el-tag>
        </template>
        <template slot="opt" scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="updataitem(scope.row)">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="open(scope.row)">删除</el-button>
        </template>
      </tree-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paginglist.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="paginglist.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <!-- 添加 -->
      <el-dialog title="添加分类" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
        <span>
          <el-form :model="addValidateForm" ref="addValidateForm" class="demo-ruleForm">
            <el-form-item label="分类名称" prop="name" label-width="80px" :rules="[{ required: true, message: '名称不能为空'}]">
              <el-input type="text" v-model="addValidateForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="父级分类" label-width="80px" prop="namevalue">
              <el-cascader v-model="addValidateForm.namevalue" :props="{ checkStrictly: true,value :'cat_id',label:'cat_name'}" :options="xialist"></el-cascader>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="additem('addValidateForm')">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改 -->
      <el-dialog title="编辑分类" :visible.sync="dialogVisible2" width="50%" :before-close="handleClose2">
        <span>
          <el-form :model="upitem" ref="updataValidateForm" class="demo-ruleForm">
            <el-form-item label="分类名称" prop="cat_name" label-width="80px" :rules="[{ required: true, message: '名称不能为空'}]">
              <el-input type="text" v-model="upitem.cat_name" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="updaitem('updataValidateForm')">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import mianbaoxie from "../components/mianbaoxie.vue";
import {
  initcategories,
  addlist,
  updatahui,
  updata,
  deleteitem,
} from "../ulits/api/categories";
export default {
  components: { mianbaoxie },
  name: "categories",
  data() {
    return {
      // 分页
      paginglist: { type: 3, pagenum: 1, pagesize: 5 },
      //初始数据
      categorieslist: [],
      // table配置项
      columns: [
        { label: "分类名称", prop: "cat_name" },
        {
          label: "是否有效",
          prop: "cat_level",
          type: "template",
          template: "isok",
        },
        {
          label: "分类等级",
          prop: "cat_level",
          type: "template",
          template: "level",
        },
        {
          label: "操作",
          type: "template",
          template: "opt",
        },
      ],
      // 添加弹出框
      dialogVisible: false,
      // 添加表单
      addValidateForm: {
        name: "",
        namevalue: "",
      },
      // 添加下拉框
      xialist: [],
      // 修改数据回填
      upitem: {},
      // 修改框
      dialogVisible2: false,
      // 总条数
      total: 0,
    };
  },
  created() {
    // 初始化数据
    initcategories(this.paginglist).then((res) => {
      this.total = res.data.total;
      this.Message(res);
      this.categorieslist = res.data.result;
    });
  },
  methods: {
    //  每页有几条
    handleSizeChange(val) {
      this.paginglist.pagesize = val;
      this.updatacategories();
    },
    //当前页
    handleCurrentChange(val) {
      this.paginglist.pagenum = val;
      this.updatacategories();
    },
    // 关闭添加框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 添加框
    add() {
      this.addValidateForm = {
        name: "",
        namevalue: "",
      };
      initcategories({ type: 2 }).then((res) => {
        this.xialist = res.data;
      });
      this.dialogVisible = true;
    },
    // 确认添加
    additem(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addlist({
            cat_pid:
              this.addValidateForm.namevalue[
                this.addValidateForm.namevalue.length - 1
              ] || 0,
            cat_name: this.addValidateForm.name,
            cat_level: this.addValidateForm.namevalue.length,
          }).then((res) => {
            this.Message(res);
            this.updatacategories();
          });
          this.dialogVisible = false;
        } else {
          return false;
        }
      });
    },
    // 关闭添加框
    handleClose2(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 修改回填
    updataitem(row) {
      updatahui(row.cat_id).then((res) => {
        this.upitem = res.data;
      });
      this.dialogVisible2 = true;
    },
    // 确认修改
    updaitem() {
      updata(this.upitem).then((res) => {
        this.Message(res);
        this.updatacategories();
      });
      this.dialogVisible2 = false;
    },
    // 删除
    open(row) {
      deleteitem(row).then((res) => {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.Message(res);
            this.updatacategories();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      });
    },
    // 消息提示
    Message(res) {
      if (res.meta.status >= 200 && res.meta.status < 300) {
        this.$message({
          message: res.meta.msg,
          type: "success",
        });
      } else {
        this.$message({
          message: res.meta.msg,
          type: "error",
        });
      }
    },
    // 获取数据
    updatacategories() {
      initcategories(this.paginglist).then((res) => {
        this.categorieslist = res.data.result;
        this.total = res.data.total;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.categories {
  .text {
    font-size: 14px;
  }
  .el-cascader {
    width: 100%;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 100%;
  }
}
</style>